<script setup>

import Son from "./Son.vue";
import {reactive, ref} from "vue";

//1.父传子 单向数据流
// const money = ref(100);
// const books = ref(["西游记", "水浒传"]);

//简写
const data = reactive({
  money: 100,
  books: ["西游记", "水浒传"]
})

function moneyMinis(arg) {
  // alert("感知到儿子买了棒棒糖"+arg)
  data.money += arg;
}
</script>

<template>
  <div style="background-color: #f9f9f9">
    <h2>Father</h2>
    <button @click="data.money+=10">充值</button>
<!--        <Son :money="data.money" :books="data.books"-->
<!--        @buy="moneyMinis"/>-->
    <!--  简写  -->
    <Son v-bind="data" @buy="moneyMinis">
      <template v-slot:title>
        哈哈Son
      </template>

      <template #btn>
        买飞机
      </template>
    </Son>
  </div>
</template>

<style scoped>

</style>